<template>
  <div @click="touchCopy">
    <slot name="defaultVal"></slot>
    <slot name="copyCon">
      <icon-copy class="cursor" />
    </slot>
  </div>
</template>

<script lang="ts" setup>
  import { Message } from '@arco-design/web-vue'
  import useClipboard from 'vue-clipboard3'

  const props = defineProps({
    val: {
      type: String,
      default: '',
    },
  })

  // 点击复制
  function touchCopy() {
    if (!props.val) {
      Message.error('没有可复制的内容')
      return
    }
    copy(props.val)
  }
  // 使用插件
  const { toClipboard } = useClipboard()
  async function copy(msg: string) {
    try {
      await toClipboard(msg)
      Message.success('复制成功')
    } catch (e) {}
  }
</script>
<style lang="less" scoped>
  arco-icon {
    flex-shrink: 0;
  }
</style>
